<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/xqzuoyebiao.css">
    <link  rel="stylesheet"  href="css/head.css">
</head>
<body>

<div  class="head"></div>
<div  id="hucontain">
    <div   ontouchmove="return false;" class="big  imgsss"   v-if="stat==true" ><img  @click="suoxiao" :src="imgs"   class="imgsssds"/></div>

    <div>
          <div>
              <img :src="zuoye.src"  />
              <span>{{zuoye.name}}</span>
              <span>{{zuoye.date}}</span>
          </div>
          <div>
              <div>作业详情</div>
              <div>
                   {{zuoye.xiangqing}}
              </div>
          </div>

          <div>
              <img @click="fangda" :index="index"  v-for="(item,index)  in  zuoye.srcc" :src="item" />
          </div>
    </div>
</div>



<div  class="dibussss"></div>
</body>
<script  src="js/jquery.3.3.1.min.js"></script>
<script src="js/swiper.min.js"></script>
<script  src="js/vue.js"></script>
<script  type="text/javascript">
    function getQueryVariable(variable)
    {

    }

    var id=getQueryVariable('id')

    $(document).ready(function () {
        $(".head").load("xqhead.html")
        $(".dibussss").load("dibu.html")
    })




    new Vue({
        el:"#hucontain",
        data: {
            stat:false,
            zuoye:{
                    src: "http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",
                    name: "陈飞宇",
                date:"2017-06-12  16:20",
                    xiangqing: "1. 请熟读被背诵《岳阳楼记》，预习《出师表》和熟读并理解翻译前两段。\n" +
                        "2. 完成《出师表》课后练习第一、第二题。\n" +
                        "3. 请熟读被背诵《岳阳楼记》，预习《出师表》和熟读并理解翻译前两段。\n" +
                        "4. 完成《出师表》课后练习第一、第二题。",
                    srcc: ["http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png","http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png", "http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png", "http://bzt.cybwnt.com/uploads/zhongxue/shijuans.png"]
                },

            imgs:"http://bzt.cybwnt.com/uploads/zhongxue/webteacher.png",
        },
        methods:{
            fangda:function ($event) {
                 this.stat=true;
                 // console.log(this.zuoye.src[$event.target.getAttribute("index")] )
                  this.imgs= this.zuoye.srcc[$event.target.getAttribute("index")]   ;
            },

            getQueryVariable:function(variable){
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){
                        return pair[1];
                    }
                }
                return(false);
            },

            suoxiao:function () {

                this.stat=false;

            }

        },

        created:function () {
            var id=this.getQueryVariable('id');
        }

    })


</script>
</html>